<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>fe-course-case3</title>
    <link rel="stylesheet" href="./style/common.css">
    <link rel="stylesheet" href="./style/nav.css">
    <link rel="stylesheet" href="./style/introduction.css">
    <link rel="stylesheet" href="./style/about_me.css">
    <link rel="stylesheet" href="./style/projects.css">
    <link rel="stylesheet" href="./style/comments.css">
    <link rel="stylesheet" href="./style/rewards.css">
    <link rel="stylesheet" href="./style/contacts.css">
</head>
<body>
<header class="header">
    <div class="logo">
        <img class="logo-pic" src="./assets/images/logo.webp" alt="LOGO" draggable="false">
    </div>
    <nav class="nav">
        <ul>
            <li class="nav-item">
                <a href="#home">首页</a>
            </li>
            <li class="nav-item">
                <a href="#about_me">关于我</a>
            </li>
            <li class="nav-item">
                <a href="#project">个人项目</a>
            </li>
            <li class="nav-item">
                <a href="#comments">领导评价</a>
            </li>
            <li class="nav-item">
                <a href="#rewards">荣誉奖项</a>
            </li>
            <li class="nav-item">
                <a href="#contact">联系方式</a>
            </li>
        </ul>
    </nav>
</header>
<!-- 第一页 -->
<section id="home" class="introduction">
    <div class="container">
        <div class="infos">
            <p class="main">
                <span class="tag">90文艺小青年</span>
                <span class="job-position">中级前端工程师·</span>
                <span class="my-name">Kevin Taurus</span>
            </p>
            <p class="desc">前端开发是构建网站和Web应用程序用户界面的过程，它包括HTML、CSS和JavaScript等技术，使用户可以与网站互动并获得良好的用户体验。</p>
            <div class="more">
                <span>详细了解我</span>
                <span>↓</span>
            </div>
        </div>
        <img class="person" src="./assets/images/person.png" alt="我的职业照">
    </div>
</section>
<!-- 关于我 -->
<section id="about_me" class="about-me">
    <ul class="container">
        <li class="shades shades-1">
            <div class="category">基本信息</div>
            <div class="title">
                <span class="main">关于我</span>
                <span class="sub">/ about me</span>
            </div>
            <div class="desc">
                <span class="label">姓名：凯文.塔罗斯</span>
                <span class="label">民族：俄罗斯族</span>
                <span class="label">出生日期：1997年9月26日</span>
                <span class="label">电话：18888888888</span>
                <span class="label">邮箱：kevintauraus@foxmail.com</span>
                <span class="label">特长：网球、羽毛球、游泳、爬山、唱歌</span>
            </div>
        </li>
        <li class="shades shades-2">
            <div class="category">教育背景</div>
            <div class="title">
                <span class="main">浙江软件工程大学</span>
                <span class="sub">/ ZheJiang SE University</span>
            </div>
            <div class="sub-title">电子商务（本科）</div>
            <div class="color-bar">
                2017年9月 ~ 2020年6月
            </div>
            <span class="label">电子商务基础课程： 电子商务概论 电子商务法律和伦理 电子商务商业模型 电子支付系统</span>
            <span class="label">网站开发和设计： 网站设计与用户体验 前端开发技术（HTML、CSS、JavaScript） </span>
            <span class="label"> 后端开发技术（例如，使用 PHP、Python、Node.js 等）</span>
        </li>
        <li class="shades shades-3">
            <div class="category">工作经验</div>
            <div class="title">
                <span class="main">初级前端开发工程师</span>
                <span class="sub">/ Primary Front-End Engineer</span>
            </div>
            <div class="sub-title">杭州滴滴滴滴有限公司</div>
            <div class="color-bar">
                2017年9月 ~ 2020年6月
            </div>
            <span class="label">PC网站开发， H5网站开发， 小程序开发</span>
            <span class="label">PC网站开发， H5网站开发， 小程序开发</span>
            <span class="label">PC网站开发， H5网站开发， 小程序开发</span>
        </li>
        <li class="shades shades-4">
            <div class="category">专业技能</div>
            <div class="title">
                <span class="main">前端基础</span>
                <span class="sub">/ Front-End Base</span>
            </div>
            <div class="sub-title">HTML CSS JS</div>
            <div class="title">
                <span class="main">前端框架</span>
                <span class="sub">/ Front-End Framework</span>
            </div>
            <div class="sub-title">Vue Vuex/Pinia Vue-router Axios Element-UI</div>
            <div class="sub-title">React Redux aHook React-router Antd-UI</div>
            <div class="sub-title">WxMiniProgram uniapp</div>
        </li>
    </ul>
</section>
<!-- 个人项目 -->
<section id="project" class="project">
    <div class="container">
        <div class="title">
            <div class="main">个人项目</div>
            <div class="sub">参与的项目</div>
        </div>
        <ul class="project-list">
            <li class="list-item">
                <img class="project-pic" src="./assets/images/project-1.webp" alt="">
                <div class="label">项目一</div>
                <div class="name">工程名称（一）</div>
                <div class="desc">描述文字描述文字描述文字描述文字，描述文字描述文字描述文字描述文字，描述文字描述文字。</div>
                <div class="more">联系我 > ></div>
            </li>
            <li class="list-item">
                <img class="project-pic" src="./assets/images/project-2.webp" alt="">
                <div class="label">项目二</div>
                <div class="name">工程名称（二）</div>
                <div class="desc">描述文字描述文字描述文字描述文字，描述文字描述文字描述文字描述文字，描述文字描述文字。</div>
                <div class="more">联系我 > ></div>
            </li>
            <li class="list-item">
                <img class="project-pic" src="./assets/images/project-3.webp" alt="">
                <div class="label">项目三</div>
                <div class="name">工程名称（三）</div>
                <div class="desc">描述文字描述文字描述文字描述文字，描述文字描述文字描述文字描述文字，描述文字描述文字。</div>
                <div class="more">联系我 > ></div>
            </li>
        </ul>
    </div>
</section>
<!-- 领导寄语 -->
<section id="comments" class="comments">
    <div class="container">
        <div class="title">
            <div class="main">领导寄语</div>
            <div class="sub">领导对工作的评价</div>
        </div>
        <div class="wrap">
            <div class="item">
                <img src="./assets/images/boss_pic.png" alt="" class="avator">
                <div class="name">爱丽丝.卡梅隆</div>
                <div class="position">巴西事业部-总经理</div>
                <div class="remarks">
                    此处为评价信息此处为评价信息此处为评价信息此处为评价信息此处为评价信息此处为评价信息此处为评价信息此处为评价信息此处为评价信息此处为评价信息此处为评价信息此处为评价信息此处为评价信息此处为评价信息此处为评价信息此处为评价信息此处为评价信息此处为评
                    此处为评价信息此处为评价信息此处为评价信息此处为评价信息此处为评价信息此处为评价信息此处为评价信息此处为评价信息此处为评价信息此处为评价信息此处为评价信息。
                </div>
            </div>

            <div class="item">
                <img src="./assets/images/boss_pic.png" alt="" class="avator">
                <div class="name">帕拉梅拉.谢尔金.莉</div>
                <div class="position">俄罗斯.中国-事业部总监</div>
                <div class="remarks">
                    此处为评价信息此处为评价信息此处为评价信息此处为评价信息此处为评价信息此处为评价信息此处为评价信息此处为评价信息此处为评价信息此处为评价信息此处为评价信息此处为评价信息此处为评价信息此处为评价信息此处为评价信息此处为评价信息此处为评价信息此处为评
                    此处为评价信息此处为评价信息此处为评价信息此处为评价信息此处为评价信息此处为评价信息此处为评价信息此处为评价信息此处为评价信息此处为评价信息此处为评价信息。
                </div>
            </div>

        </div>
    </div>
</section>
<!-- 荣誉奖项 -->
<section id="rewards" class="rewards">
    <div class="container">
        <div class="left">
            <div class="title">获得的奖项</div>
            <div class="desc">荣誉奖项</div>
            <div class="note">右边是所获得的奖项 →</div>
            <div class="content">描述文字描述文字描述文字描述文字描述文字</div>
        </div>
        <div class="right">
            <div class="item">
                <img class="img" alt="奖项"
                     src="https://img.zcool.cn/community/01849b5efaef53a801206621052468.png@2o.png">
            </div>
            <div class="item">
                <img class="img" alt="奖项" src="https://img.zcool.cn/community/0109d65c2a460da80121df90c6976e.gif">
            </div>
            <div class="item">
                <img class="img" alt="奖项"
                     src="https://img.zcool.cn/community/01f5165ca1c40ba801214168249ab6.png@2o.png">
            </div>
            <div class="item">
                <img class="img" alt="奖项"
                     src="https://img.zcool.cn/community/017a7f5d6631e7a8012187f45bb315.jpg@2o.jpg">
            </div>
            <div class="item">
                <img class="img" alt="奖项"
                     src="https://img.zcool.cn/community/019bc95f903c7811013e4584d58ad1.png@1280w_1l_2o_100sh.png">
            </div>
            <div class="item">
                <img class="img" alt="奖项"
                     src="https://2672686a4cf38e8c2458-2712e00ea34e3076747650c92426bbb5.ssl.cf1.rackcdn.com/2018-06-04-21-40-16.jpeg">
            </div>
        </div>
    </div>
</section>
<!-- footer -->
<section id="contact" class="contact">
    <div class="container">
        <div class="title">Contact me!</div>
        <div class="sub-title">联系我吧</div>
        <div class="email">邮箱：testemial@foxmail.com</div>
        <div class="tel">电话：18022220000</div>
        <div class="edition-infos">版权所有 ©2023 - 2049 Kevin.Taurus的个人简介</div>
    </div>
</section>
</body>

</html>
